<template>
    <div class="order">
        <div class="order-box">
            <el-form :model="from" :ref="from" :rules="rules" :label-position="labelPosition" class="demo-ruleForm">
                <!-- 基本信息 -->
                <div class="userInfo" style="margin-top: 40px; ">
                    <div style="margin: 18px 20px; font-weight: 700;">基本信息</div>
                    <el-divider></el-divider>
                    <el-form-item label="用户昵称:" prop="ID" style="margin-left: 20px;">
                        <el-input style="width: 340px; margin-left: 40px;" v-model="from.ID" autocomplete="off"
                            @change="userInfoBtn(from.ID)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="真实姓名:" prop="name" style="margin-left: 20px;">
                        <el-input style="width: 340px; margin-left: 40px;" v-model="from.name" autocomplete="off"
                            @change="nameChange(from.name)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="身份证号:" prop="peopleID" style="margin-left: 20px;">
                        <el-input style="width: 340px; margin-left: 40px;" v-model="from.peopleID" autocomplete="off"
                            @change="peopleIDChange(from.peopleID)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="手机号:" prop="phoneNumber" style="margin-left: 20px;">
                        <el-input style="width: 340px; margin-left: 54px;" v-model="from.phoneNumber" autocomplete="off"
                            @change="phoneNumberChange(from.phoneNumber)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="电子邮箱:" prop="emailData" style="margin-left: 20px;">
                        <el-input style="width: 340px; margin-left: 40px;" v-model="from.emailData" autocomplete="off"
                            @change="emailDataChange(from.emailData)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <div style="display: flex;">
                        <el-form-item label="代理权限:" style="margin-left: 20px;">
                            <el-select v-model="agency" placeholder="全部 " style="width: 340px;margin-left: 40px;"
                                @change="agencyChange(agency)">
                                <el-option v-for="item in attribute" :key="item.value" :label="item.name"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <div v-if="agency == 1 || agency == 2">
                            <el-form-item label="代理时长:" style="margin-left: 20px;">
                                <el-select v-model="durations" placeholder="全部 " style="width: 340px;margin-left: 28px;"
                                    @change="durationChange(durations)">
                                    <el-option v-for="item in duration" :key="item.value" :label="item.name"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div v-if="agency == 1">
                            <el-form-item label="代理上级:" prop="superior" style="margin-left: 20px;">
                                <el-input style="width: 340px; margin-left: 42px;" v-model="from.superior"
                                    autocomplete="off" @change="superiorChange(from.superior)">
                                </el-input>
                            </el-form-item>
                        </div>
                       

                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex; align-items: center; margin-left: 20px;">
                            <div style="color: #606266; font-size: 14px; font-weight: 700;">内部测试用户:</div>
                            <div style="margin-left: 25px;">
                                <el-radio v-model="radio" label="0" >否</el-radio>
                                <el-radio v-model="radio" label="1" >是</el-radio>
                            </div>
                           
                        </div>
                    <el-divider></el-divider>
                    <div style="margin: 18px 20px; font-weight: 700;">鱼米数量</div>
                    <el-divider></el-divider>
                    <el-form-item label="鱼米数量:" prop="Fish" style="margin-left: 20px;">

                        <el-input style="width: 340px; margin-left: 42px;" v-model.number="from.Fish" autocomplete="off"
                            @change="FishChange(from.Fish)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                </div>



                <div style="width: 100%;margin: 50px 50%; ">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm(from)">提交</el-button>
                    </el-form-item>
                </div>


            </el-form>
        </div>
    </div>
</template>

<script>
import { addUser, getAgentByUserId } from '@/api/user'
// 自定义校验方法  此处必须加callback形成闭环
const peopleID = (rule, value, callback) => {
    const rexg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (!value) {
        callback(new Error("身份证号不能为空"));
    } else if (!rexg.test(value)) {
        callback(new Error("身份证号格式错误"));
    } else {
        callback();
    }
};
const phoneNumber = (rule, value, callback) => {
    const rexg = /^1[3-9]\d{9}$/
    if (!value) {
        callback(new Error("手机号不能为空"));
    } else if (!rexg.test(value)) {
        callback(new Error("手机号格式错误"));
    } else {
        callback();
    }
};
const name = (rule, value, callback) => {
    if (!value) {
        callback(new Error("姓名不能为空"));
    } else {
        callback();
    }
};

export default {
    data() {
        return {
            // 代理权限   	智能渔方代理级别：0.无 1.市级代理 2.省级代理
            attribute: [{
                name: '非代理',
                value: '0'
            },
            {
                name: '市级代理',
                value: '1'
            },
            {
                name: '省级代理',
                value: '2'
            }
            ],
            duration: [
                {
                    name: '3年',
                    value: '1'
                }
            ],
            labelPosition: "right",
            agency: '', //代理权限
            durations: '', //代理时长

            radio: '1',
            //用户信息
            from: {

                ID: '',
                name: '',
                peopleID: '',
                phoneNumber: '',
                emailData: '',
                superior: '',
                Fish: 0

            },
            rules: {
                peopleID: [
                    { validator: peopleID, trigger: 'blur' }
                ],
                phoneNumber: [
                    { validator: phoneNumber, trigger: 'blur' }
                ],
                name: [
                    { validator: name, trigger: 'blur' }
                ]
            },

            nick: '', //用户昵称
            realName: '', //真实姓名
            idCardNo: '', //身份号码.
            phoneNumber: '', //手机号
            fishPartyAgentDeadline: '1', //智能渔方代理期限：1.三年
            fishPartyAgentLevel: '0', //智能渔方代理级别：0.无 1.市级代理 2.省级代理
            fishPartyAgentSuperiorId: '', //智能渔方上级代理ID
            fishIntegral: '', //鱼米
            email: '',
        };
    },
    created() {
        // 给默认选项
        this.agency = this.attribute[0].value
        this.durations = this.duration[0].value
    },

    methods: {
        // 提交
        submitForm(from) {
            this.$refs[from].validate(async (valid) => {
                if (valid) {
                    if (this.fishPartyAgentSuperiorId) {
                        let data = {
                            userId: this.fishPartyAgentSuperiorId
                        }
                        let agentInfo = await getAgentByUserId(data)
                        if (agentInfo.code != 0) {
                            alert("保存失败")
                            return;
                        }
                        if (agentInfo.data == null) {
                            alert("代理上级不存在！")
                            return;
                        } else if (agentInfo.data.agentLevel != 2) {
                            alert("代理上级必须为省级代理！")
                            return;
                        }
                    }
                    let data = {
                        nickName: this.nick,
                        realName: this.realName,
                        idCardNo: this.idCardNo,
                        phoneNumber: this.phoneNumber,
                        fishPartyAgentDeadline: this.fishPartyAgentDeadline,
                        fishPartyAgentLevel: this.fishPartyAgentLevel,
                        fishPartyAgentSuperiorId: this.fishPartyAgentSuperiorId,
                        fishIntegral: this.fishIntegral,
                        email: this.email,
                        testFlag:this.radio
                    }
                    let result = await addUser(data)
                    if (result.code == 0) {
                        alert('添加成功返回用户列表')
                        setTimeout(() => {
                            this.$router.push('userAdministrator')
                        }, 2000);
                    }
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 用户昵称
        userInfoBtn(e) {
            this.nick = e
        },
        // 真实姓名
        nameChange(e) {
            this.realName = e
        },
        // 身份证号
        peopleIDChange(e) {
            this.idCardNo = e
        },
        // 手机号码
        phoneNumberChange(e) {
            this.phoneNumber = e
        },
        // 电子邮箱
        emailDataChange(e) {
            this.email = e
        },
        //代理权限
        agencyChange(e) {
            this.fishPartyAgentLevel = e
        },
        // 智能渔方代理期限
        durationChange(e) {
            if (this.agency !== 0) {
                this.fishPartyAgentDeadline = e
            }
        },
        // 代理上级
        superiorChange(e) {
            this.fishPartyAgentSuperiorId = e
        },
        FishChange(e) {
            this.fishIntegral = e
        }
    }
}
</script>

<style lang="scss" scoped>
.label {
    .buy_num {
        display: inline;
        margin-right: 5.86rem;
    }

    .btn_minute {
        border-radius: 0.133rem 0 0 0.133rem;
        padding: 0.146rem 0.2rem 0.146rem 0.226rem;
    }

    input {
        font-size: 12px;
        padding: 0.146rem 0.12rem;
        background: #f5f5f5;
        text-align: center;
    }

    .btn_add {
        border-radius: 0 0.133rem 0.133rem 0;
        padding: 0.146rem 0.226rem 0.146rem 0.2rem;
    }
}

.weight {
    margin-right: 50px;
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #ccc;
    text-align: center;
    line-height: 30px;
}

::v-deep .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 43px;
}

[data-v-2a76a2eb].el-form-item {
    margin-bottom: 22px;
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
}

::v-deep.el-form-item {
    margin-bottom: 22px;
    display: flex;
    align-content: center;
}

::v-deep .el-form-item__label {
    // text-align: right;
    vertical-align: middle;
    float: none;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.order {
    width: 100%;
    height: 100%;

    .order-box {
        border: 1px solid #ccc;
        width: 98%;
        margin: 0 auto;

        .userInfo {
            border: 1px solid #ccc;
            width: 98%;
            margin: 0 auto;
        }
    }

    .userInfos {
        border: 1px solid #ccc;
        width: 500px;
        margin-left: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>